<template>
    <myDisplayWrap breadcrumbs="基础信息">
        <a-row class="userBox">
            <div class="titleBar">
                基础信息
                <span style="color: gray;font-size: 12px;font-weight: 300;">* 如需修改信息，请进入统一用户中心修改 </span>
                <span style="color: #1890FF;font-size: 12px;font-weight: 300;cursor: pointer;" @click="toJump">立即前往</span>
            </div>
            <a-col :span="16" :offset="2">
                <a-form-model ref="ruleForm" :model="userInfo" :rules="rules" :label-col="labelCol"
                    :wrapper-col="wrapperCol">
                    <a-form-model-item label="头像:" class="clearMB">
                        <div class="userUpload">
                            <img src="@/assets/images/supplierDisplayCenter/容器.png" alt="">
                        </div>
                    </a-form-model-item>
                    <a-form-model-item ref="userName" label="姓名:" prop="userName">
                       {{ userInfo.userName }}
                    </a-form-model-item>
                    <a-form-model-item label="邮箱:" ref="email" prop="email">
                       {{ userInfo.email }}
                    </a-form-model-item>
                    <a-form-model-item label="工号:" ref="email" prop="email">
                       {{ userInfo.jobNo }}
                    </a-form-model-item>
                    <a-form-model-item label="手机:" ref="email" prop="email">
                       {{ userInfo.mobile }}
                    </a-form-model-item>
                    <a-form-model-item label="所属部门:" ref="email" prop="email">
                       {{ userInfo.deptInfo&& userInfo.deptInfo.length&&userInfo.deptInfo[0].deptName}}
                    </a-form-model-item>
                </a-form-model>
            </a-col>
        </a-row>
    </myDisplayWrap>
</template>

<script>
import myDisplayWrap from './components/myDisplayWrap.vue'
import { appConfig } from '@/config/app'
import storage from '@/utils/storage'

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener("load", () => callback(reader.result));
    reader.readAsDataURL(img);
}
export default {
    components: {
        myDisplayWrap
    },
    data() {
        return {
            // rules: {
            //     userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
            //     //mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
            //     email: [
            //         { required: true, message: "请输入邮箱", trigger: "blur" },
            //         {
            //             pattern: this.validators.rules().emailReg,
            //             message: "邮箱格式不正确"
            //         }
            //     ]
            // },
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            imageUrl: '',
            loading: false,
            userInfo: storage.session.get('userInfo')
        }
    },
    mounted() {

    },
    methods: {
        toJump() {
            window.open('https://tradetest.szggzy.com/ggzy/center/#/login', '_blank')
        },
        beforeUpload(file) {
            const isJpgOrPng =
                file.type === "image/jpeg" || file.type === "image/png";
            if (!isJpgOrPng) {
                this.$message.error("只能上传jpg、png类型的照片!");
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error("只能上传2m以内的图片!");
            }
            return isJpgOrPng && isLt2M;
        },
        handleChange(info) {
            if (info.file.status === "uploading") {
                this.loading = true;
                return;
            }
            if (info.file.status === "done") {
                // Get this url from response in real world.
                getBase64(info.file.originFileObj, imageUrl => {
                    this.imageUrl = imageUrl;
                    this.loading = false;
                });
            }
        },
        submitForm() {
            let params = {
                userName: this.form.userName,
                email: this.form.email
            };
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    // this.$http
                    //   .post(
                    //     appConfig.microServModules.sysrest + "api/basic/update",
                    //     params
                    //   )
                    //   .then(response => {
                    //     //this.form = response.data.data;
                    //     this.$eventHub.$emit("updateUserName", params.userName);
                    //     this.$message.success("保存成功");
                    //     this.reload();
                    //   })
                    //   .catch(error => {
                    //     console.log(error);
                    //   });
                } else {
                    return false;
                }
            });
        }
    },
    watch: {

    }
}
</script>

<style lang="scss" scoped>
.userBox {
    padding: 0 24px;
    border-left: 4px solid #cccccc54;
    margin-left: -1px;
    min-height: 650px;
}

.titleBar {
    width: 100%;
    height: 50px;
    line-height: 30px;
    padding: 10px;
    margin-bottom: 20px;
    background: #fff;
    border-bottom: 1px dashed #ccc;
    font-size: 16px;
    color: #333;
    font-weight: bold;
}

.avatar-uploader>.ant-upload {
    width: 128px;
    height: 128px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}

.sizeAvt {
    margin-bottom: 10px;
}

.imgAvatar {
    width: 120px;
}

.userUpload {
    width: auto !important;
    img {
        width: 120px;
        height: auto;
    }
}

.redMFont {
    color: red;
    margin-left: 101px;
}
</style>